import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useAppStore = defineStore('app', () => {
  // 侧边栏状态
  const sidebarCollapsed = ref(false)

  // 主题模式
  const isDark = ref(false)

  // 设备类型
  const device = ref<'desktop' | 'mobile'>('desktop')

  // 加载状态
  const loading = ref(false)

  // 页面大小
  const pageSize = ref(20)

  // 切换侧边栏
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
    localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed.value))
  }

  // 设置侧边栏状态
  const setSidebarCollapsed = (collapsed: boolean) => {
    sidebarCollapsed.value = collapsed
    localStorage.setItem('sidebarCollapsed', String(collapsed))
  }

  // 切换主题
  const toggleTheme = () => {
    isDark.value = !isDark.value
    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
    updateTheme()
  }

  // 设置主题
  const setTheme = (theme: 'light' | 'dark') => {
    isDark.value = theme === 'dark'
    localStorage.setItem('theme', theme)
    updateTheme()
  }

  // 更新主题
  const updateTheme = () => {
    const html = document.documentElement
    if (isDark.value) {
      html.classList.add('dark')
    } else {
      html.classList.remove('dark')
    }
  }

  // 设置设备类型
  const setDevice = (deviceType: 'desktop' | 'mobile') => {
    device.value = deviceType

    // 移动端自动收起侧边栏
    if (deviceType === 'mobile') {
      setSidebarCollapsed(true)
    }
  }

  // 设置加载状态
  const setLoading = (loadingState: boolean) => {
    loading.value = loadingState
  }

  // 设置页面大小
  const setPageSize = (size: number) => {
    pageSize.value = size
    localStorage.setItem('pageSize', String(size))
  }

  // 初始化应用
  const initApp = () => {
    // 恢复侧边栏状态
    const savedSidebarState = localStorage.getItem('sidebarCollapsed')
    if (savedSidebarState !== null) {
      sidebarCollapsed.value = savedSidebarState === 'true'
    }

    // 恢复主题
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme) {
      isDark.value = savedTheme === 'dark'
    } else {
      // 默认跟随系统主题
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
      isDark.value = prefersDark
    }
    updateTheme()

    // 恢复页面大小
    const savedPageSize = localStorage.getItem('pageSize')
    if (savedPageSize) {
      pageSize.value = Number(savedPageSize)
    }

    // 检测设备类型
    const checkDevice = () => {
      const width = window.innerWidth
      setDevice(width < 768 ? 'mobile' : 'desktop')
    }

    checkDevice()
    window.addEventListener('resize', checkDevice)

    // 监听系统主题变化
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    const handleThemeChange = (e: MediaQueryListEvent) => {
      if (!localStorage.getItem('theme')) {
        isDark.value = e.matches
        updateTheme()
      }
    }

    mediaQuery.addEventListener('change', handleThemeChange)
  }

  return {
    // 状态
    sidebarCollapsed,
    isDark,
    device,
    loading,
    pageSize,

    // 方法
    toggleSidebar,
    setSidebarCollapsed,
    toggleTheme,
    setTheme,
    setDevice,
    setLoading,
    setPageSize,
    initApp
  }
})